<template>
  <div style="padding:30px;">
    <div class="yy demo-input-size">
      <el-form label-width="150px" :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="审批人">
          <el-input
            v-model="formInline.user"
            placeholder="审批人"
            :style="{width:'320px'}"
          />
        </el-form-item>
        <el-form-item label="活动区域">
          <el-input
            v-model="formInline.user"
            :style="{width:'320px'}"
          />
        </el-form-item>

        <el-form-item class="zuo">
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button @click="onSubmit">重置</el-button>
        </el-form-item>

      </el-form></div>
    <div class="zhong">
      <span>全部</span>
      <span>可用</span>
      <span>停用</span>
      <!-- <span>1</span> -->
    </div>
    <div class="xx">
      <el-button class="btn" type="primary" @click="onSubmit">查询</el-button>
      <el-table
        :data="tableData"
        border
        style="width: 100%"
      >
        <el-table-column
          prop="date"
          label="日期"
          width="180"
        />
        <el-table-column
          prop="name"
          label="姓名"
          width="180"
        />
        <el-table-column
          prop="address"
          label="地址"
        />
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formInline: {
        user: '',
        region: ''
      },
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    }
  },
  methods: {
    onSubmit() {
      console.log('submit!')
    }
  }
}

</script>

<style scoped>
span{
  margin-left: 50px;
}
.zhong{
  background-color: #fff;
  margin-top: 20px;
  line-height: 80px;
  height: 80px;
   border-radius: 20px;
   /* padding: 20px; */
}
.btn{
  margin-bottom: 30px;

}
el-form{
  margin-top: 30px;
}
.zuo{
  margin-left:20px;
}
.el-input.input-width {
  width: 200px;
}
.yy{

  /* margin-top: 20px; */
  /* background-color: yellow; */
  background-color: #fff;
  padding: 30px;
  border-radius: 20px;
  padding-top: 50px;

}
.xx{
  /* margin-top: 20px; */
  margin-top: 20px;
  /* background-color: red;
   /* background-color: #fff;  */
  /* padding: 30px; */
  background-color: #fff;
  padding: 30px;
  border-radius: 20px;
}

.from{
  margin-top: 30px;
}
</style>
